<template>
  <view class="follow-container">
    <view class="follow-tab">
      <view class="follow-tab-box">
        <view class="follow-tab-item" @click="currentIndex=0" :class="{active:currentIndex===0}">文章</view>
        <view class="follow-tab-item" @click="currentIndex=1" :class="{active:currentIndex===1}">作者</view>
      </view>
    </view>
    <!-- 内容切换区域 -->
    <view class="follow-list-container">
      <swiper class="follow-list-swiper" @change="currentIndex = $event.detail.current" :current="currentIndex">
        <swiper-item>
          <ListItem :isShowLoading="isShowLoading" :list="articleList" v-if="articleList.length"></ListItem>
          <view class="no-data">{{articleDataNone && '暂无收藏的文章'}}</view>
        </swiper-item>
        <swiper-item>
			<AuthorList :authorList="authorList" v-if="authorList.length"></AuthorList>
               <view v-if="authorDataNone" class="no-data">暂无关注的作者</view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  onLoad () {
	// todo 没有这个历史记录栈的时候不会触发这个事件
	// 全局监听事件的触发
	    uni.$on('updateArticle', (e) => {
	      this._getFollowArticle('noLoading');
	    })
	    // // todo 修改关注的作者，进行从新请求函数 
	    // uni.$on('updateAuthor', (e) => {
	    //   this.changeActive('noLoading');
	    // })
  },
  onShow() {
	  // #ifdef MP-WEIXIN
	  if (!this.$store.state.userInfo) {
	    uni.redirectTo({
	      url: '/pages/login/index'
	    })
	    return
	  }
	  // #endif
  	this._getFollowArticle();
  	this.changeActive();
  },
  data () {
    return {
      currentIndex: 0,
      articleList: [],
      isShowLoading: false,
	  articleDataNone: '',
      authorDataNone: '',
      authorList: [],
    }
  },
  methods: {
    async _getFollowArticle (isLoading) {
		const list = await this.$http.get_follow_article({ userId: this.userInfo._id,isLoading })
		if (list.length) {
			this.articleDataNone = ''
		} else {
		    this.articleDataNone = true
		}
		this.articleList = list
		// !list.length && (this.dataNone = true)
    },
	async changeActive(isLoading) {
		const list = await this.$http.get_follow_author({ userId: this.userInfo._id,isLoading })
		this.authorList = list
		if (list.length) {
			this.authorDataNone = ''
		} else {
		    this.authorDataNone = true
		}
	}
  }
}
</script>

<style lang="scss">
@import "./css/follow.scss"
</style>
